<template>
    <div class="app-container" ref="appContainer">
        <div class="header">
            <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
                <el-form-item label="请输入用户ID">
                    <el-input v-model="inputSearch.searchUserid" :placeholder="`请输入用户ID`" clearable />
                </el-form-item>
                <el-form-item label="请输入联盟ID">
                    <el-input v-model="inputSearch.searchId" :placeholder="`请输入联盟ID`" clearable />
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="inputSearch.searchDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="search">
                <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
            </div>
        </div>

        <!-- ------------表格--------------->
        <div class="table">
            <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true"
                show-summary>
                <el-table-column label="结算时间" align="center" prop="time" width="155px">
                </el-table-column>
                <el-table-column label="牌局编号" align="center" prop="juId" width="125px">
                </el-table-column>
                <el-table-column label="用户ID" align="center" prop="uid" width="125px">
                </el-table-column>
                <el-table-column label="用户呢称" align="center" prop="name" width="125px">
                </el-table-column>
                <el-table-column label="输赢" align="center" prop="winLost" width="300px">
                </el-table-column>
                <el-table-column label="税收" align="center" prop="tax" width="300px">
                </el-table-column>

                <el-table-column label="本人收益" align="center" prop="shouyi" width="300px">
                </el-table-column>

                <el-table-column label="操作" align="center" width="500px">
                    <template #default="scope">
                        <el-button type="success" @click="onClickDetail(scope.row)">战绩详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <!-- ------------分页--------------->
        <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
          @pagination="getList" /> -->

        <!-- ------------分页--------------->
        <div class="pagination">
            <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
                layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
                @current-change="getList" />
        </div>

        <el-dialog v-model="dialogVisible" title="下注详情" width="90%">
            <el-table v-loading="loading" :data="detailList" fit highlight-current-row style="width: 100%" :border="true">
                <el-table-column label="牌局" align="center" prop="ju" width="155px">
                </el-table-column>

                <el-table-column label="开奖" align="center" width="155px">
                    <template #default="scope">
                        <el-image style="width: 40px; height: 40px" :src="scope.row.res1"></el-image>
                        <el-image style="width: 40px; height: 40px" :src="scope.row.res2"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="用户ID" align="center" prop="uid" width="155px">
                </el-table-column>
                <el-table-column label="输赢" align="center" prop="winlost" width="155px">
                </el-table-column>
                <el-table-column label="下注信息" align="center">
                    <template #default="scope">
                        <div style="display:flex;justify-content: center;">
                            <div style="width:200px;display: flex;" v-for="detail in scope.row.betdetail">
                                <div style="width: 40px;">
                                    <div>
                                        {{ formatBetDtail(detail) }}
                                    </div>
                                    <div>
                                        {{ detail["num"] }}
                                    </div>
                                </div>
                                <el-image style="width: 40px; height: 40px"
                                    :src="formatBetRes(detail, scope.row.cid, 1)"></el-image>
                                <el-image v-if="formatBetRes(detail, scope.row.cid, 2)" style="width: 40px; height: 40px"
                                    :src="formatBetRes(detail, scope.row.cid, 2)"></el-image>
                            </div>
                        </div>

                    </template>
                </el-table-column>

            </el-table>

            <template #footer>
                <span class="dialog-footer">
                    <div style="display: flex; justify-content: center;">
                        <el-button type="primary" @click="dialogVisible = false">
                            好的
                        </el-button>
                    </div>
                </span>
            </template>

        </el-dialog>


    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Base64 } from 'js-base64'
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, de, fa, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { GameConfig } from '@/config/GameConfig'
import { DateUtil } from '@/engine/util/DateUtil'
import { Base64Helper } from '@/engine/util/Base64Helper'
import { GroupInfo } from '@/store/model/GroupInfo'
import { BetModel } from '@/store/model/BetModel'
import { data } from 'dom7'
import { number } from 'echarts'
const loading = ref(true)
const appContainer = ref(null)


const inputSearch = reactive({
    searchUserid: "" + GroupInfo.instance.userid,
    searchId: "" + GroupInfo.instance.id,
    searchDate: new Date()
})

//列表查询选项
const listQuery = reactive({
    pagenum: 1, //第几页
    pagesize: 10, //一页多少个
})

let list = reactive([
    {

    }
])
let pageObj = reactive({
    total: 0
})

const dialogVisible = ref(false)
const detailList = reactive([
    {

    }
])



onMounted(() => {

    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        loading.value = false
    }, 500)
    getList()
})


const onclickSearch = () => {
    Logger.log('onclickSearch!', inputSearch)
    let groupId: number = parseInt(inputSearch.searchId);
    let userId:number = parseInt(inputSearch.searchUserid)
    if(isNaN(userId)){
        UIHelper.showMsg("请输入正常的userid")
    }
    else if (isNaN(groupId)) {
        UIHelper.showMsg("请输入正常的id")
    } else {
        let nowDate: Date = new Date(inputSearch.searchDate.getFullYear(), inputSearch.searchDate.getMonth(), inputSearch.searchDate.getDate())
        let time: number = Math.floor(nowDate.getTime() / 1000)
        HttpClient.groupZhanji(groupId, time, userId, (data: object) => {
            loading.value = false
            let list: Array<object> = data["data"]
            formatDataList(list)
        })
    }

}

const handleSizeChange = (val: number) => {
    listQuery.pagesize = val
    getList()
}

const formatDataList = (dataList: Array<object>) => {
    list.splice(0)
    for (let i = 0; i < dataList.length; i++) {
        let data = {
            "time": DateUtil.formatDateStr3(dataList[i]["time"] * 1000),
            "juId": dataList[i]["juId"],
            "game": GameConfig.DeskName[dataList[i]["game"]],
            "name": Base64.decode(dataList[i]["name"]),
            "uid": dataList[i]["uid"],
            "winLost": dataList[i]["winLost"],
            "tax": dataList[i]["tax"],
            "shouyi": dataList[i]["shouyi"],
            "detail": dataList[i]["detail"]
        }

        list[i] = data
    }
    Logger.log("formatDataList", list)
}

const getList = () => {
    loading.value = true;
    onclickSearch()

}

const formatBetDtail = (detail) => {
    let showStr = ""
    if (detail["bettype"] == GameConfig.Specail_Action_Type.Danya) {
        showStr = "单 "
    }
    else if (detail["bettype"] == GameConfig.Specail_Action_Type.Lianchuan) {
        showStr = "连串 "
    }
    else if (detail["bettype"] == GameConfig.Specail_Action_Type.Baozi) {
        showStr = "豹子 "
    }
    else if (detail["bettype"] == GameConfig.Specail_Action_Type.Nuo) {
        showStr = "挪 "
    }
    return showStr
}
const formatBetRes = (detail, cid: number, resId: number) => {
    let url = ""
    if (detail) {
        let num1 = 0
        let num2 = 0
        let num = 0
        if (detail["bettype"] == GameConfig.Specail_Action_Type.Danya ||
            detail["bettype"] == GameConfig.Specail_Action_Type.Lianchuan
            || detail["bettype"] == GameConfig.Specail_Action_Type.Baozi) {
            num1 = (cid - 1) * 6 + detail["b1"] - 1
            num2 = (cid - 1) * 6 + detail["b2"] - 1
            if (resId == 1) {
                num = num1
            } else {
                num = num2
            }
            url = "/yuxiaxie/animal" + num + ".png"
            if (detail["bettype"] == GameConfig.Specail_Action_Type.Danya && resId == 2) {
                url = ""
            }
        }
        else if (detail["bettype"] == GameConfig.Specail_Action_Type.Nuo) {
            num1 = (cid - 1) * 6 + detail["pos1"] - 1
            num1 = (cid - 1) * 6 + detail["pos1"] - 1
            if (resId == 1) {
                num = num1
            } else {
                num = num2
            }
            url = "/yuxiaxie/animal" + num + ".png"
        }
    }
    return url
}

const onClickDetail = (row) => {
    detailList.splice(0)
    let rowDetailList = row["detail"]
    Logger.log("onClickDetail", rowDetailList)
    dialogVisible.value = true
    for (let i = 0; i < rowDetailList.length; i++) {
        let cid: number = rowDetailList[i]["cid"]
        let list: Array<BetModel> = BetModel.json2ModelList(rowDetailList[i]["betdetail"])
        let data = {
            "ju": rowDetailList[i]["ju"],
            "cid": cid,
            "uid": rowDetailList[i]["uid"],
            "betdetail": list,
            "winlost": rowDetailList[i]["winlost"],
        }
        let num1 = (cid - 1) * 6 + rowDetailList[i]["res1"] - 1
        let num2 = (cid - 1) * 6 + rowDetailList[i]["res2"] - 1
        data["res1"] = "/yuxiaxie/animal" + num1 + ".png"
        data["res2"] = "/yuxiaxie/animal" + num2 + ".png"
        detailList[i] = data
    }

}





</script>
      
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
      